import 'package:flutter/material.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';

import 'controller.dart';

class JzxFollowedListView extends GetView<JzxFollowedListController> {
  const JzxFollowedListView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: const JzxAAppBar(title: 'FOLLOW LIST'),
      body: Obx(() {
        if (controller.itmes.isEmpty) {
          return Center(
            child: Assets.images.icEmpty.image(width: 200.w),
          ).backgroud(Assets.images.normalBgv);
        }

        return GridView.builder(
          padding: EdgeInsets.only(
              left: 55.w, right: 55.w, top: kNavigationBarHeight + 40.w),
          itemCount: controller.itmes.length,
          itemBuilder: (context, index) {
            final item = controller.itmes[index];
            return Stack(
              alignment: Alignment.bottomCenter,
              clipBehavior: Clip.none,
              children: [
                Container(
                  width: 120.w,
                  height: 95.w,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 5, vertical: 8),
                  decoration: BoxDecoration(
                    color: const Color(0x26FFFFFF),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Text(
                        item.nickname,
                        style: myAppColors.white.font_20.medium,
                        maxLines: 1,
                        textAlign: TextAlign.center,
                      ),
                      JzxGaps.h7,
                      InkWell(
                        onTap: () {
                          controller.removeUser(index);
                        },
                        child: Assets.images.icCancelFollow.image(height: 26.w),
                      ),
                    ],
                  ),
                ),
                Positioned(
                  bottom: 75.w,
                  child: JzxUserFrame(
                    item.avatarUrl,
                    60.w,
                    level: item.level.toInt(),
                  ),
                ),
              ],
            );
          },
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 35.w,
            crossAxisSpacing: 23,
          ),
        ).backgroud(Assets.images.normalBgv);
      }),
    );
  }
}
